<template>
	<view class="takeout">
			<u-sticky>
				<view class="box">
					<view class="searchbox">
						<view class="search">
							<view class="scan">
								<image src="../../static/ss1.png"></image>
							</view>
							<view class="inputbox">
								<input placeholder="搜索" v-model="keyword" />
							</view>
							<view class="searchbut" @click="search()">搜索</view>
						</view>
					</view>
					<u-tabs @change="changeBrand" :current.sync="brand" :list="cate" :scrollable="false" lineWidth="100rpx" lineHeight="5rpx" lineColor="#F94D29" :activeStyle="{color:'#F94D29'}"></u-tabs>
				</view>
			</u-sticky>
		
		<!-- 商品部分 -->
		<view class="product" v-for="(item, index) in list" :key="index" @click="tonext(item)">
			<view class="product-left">
				<image :src="item.logo">
				</image>
			</view>
			<!-- 中间 -->
			<view class="product-centre">
				<view class="top-title" >
					<view>{{ item.merch_name }}</view>
					<image src="../../static/fire1.png"></image>
				</view>
				<view class="centre-title">
					<view class="right">
						<view class="title-one">{{ item.merch_score }}分</view>
						<view>已销{{ item.sales_num }}</view>
					</view>
					<!-- <view class="left">
						{{item.distance}}km
					</view> -->
				</view>
				<view class="bottom-title">
					<view class="bottom-frame" v-for="(s, sindex) in item.tags.split(',')" :key="sindex">
						<text class="farame-title">{{ s }}</text>
					</view>
				</view>
			</view>
		</view>
		<kong v-if="list.length == 0"></kong>

	</view>
</template>

<script>
import kong from '../../components/kong.vue'
export default {
	components: {
		kong
	},
	data() {
		return {
			list: [],
			page_index: 1,
			is_data: true,
			keyword: '',
			cate: [{
				name: '全部',
			}, {
				name: '华达',
			}, {
				name: '日新'
			},{
				name:'优生活'
			}],
			brand:0,
			loading:false,
		}
	},
	onLoad() {
		this.getlist()
	},
	onReachBottom() {
		this.is_data && this.getlist()
	},
	methods: {
		changeBrand(e){
			this.loading = false
			this.brand = e.index
			this.page_index = 1
			this.list = []
			this.is_data = true
			this.getlist()
		},
		getplace() {
			let that = this
			uni.getLocation({
				type: 'wgs84',
				success: function (res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					that.getlist(res.longitude, res.latitude)
				}
			});
		},
		//获取列表
		getlist() {
			if(this.loading){
				return
			}
			this.loading = true
			this.$http({
				url: 'api/Wechat/supermarketList',
				data: {
					page_index: this.page_index,
					page_size: 10,
					keyword: this.keyword,
					supermarket_brand:this.brand
				}
			}).then(res => {
				this.loading = false
				if (res.data.length) {
					this.list.push(...res.data)
					this.page_index++
					return
				}
				this.is_data = false
			})
		},
		search() {
			this.list= []
			this.page_index = 1
			this.getlist()
		},
		tonext(item) {
			uni.navigateTo({
				url: '/pageshop/storeinfo/storeinfo?id=' + item.id
			})
		}
	}
}
</script>

<style lang="scss">
	.box{
		width: 750rpx;
		background-color: #F7F7F7;
	}
.takeout {
	margin-top: 24rpx;

	.searchbox {
		width: 100%;
		height: 134rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.search {
			width: 690rpx;
			height: 40rpx;
			padding: 15rpx 0;
			background: #FFFFFF;
			border-radius: 36rpx;
			border: 2rpx solid #F94D29;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;

			.scan {
				width: 76rpx;
				text-align: center;
				border-right: solid 2rpx #F2F2F2;

				image {
					width: 32rpx;
					height: 26rpx;
				}
			}

			.inputbox {
				width: 448rpx;
				height: 40rpx;
				padding: 0 24rpx;

				>input {
					width: 100%;
				}
			}

			.searchbut {
				width: 112rpx;
				height: 62rpx;
				background: linear-gradient(180deg, #F94D29 0%, #F99529 100%);
				border-radius: 36rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #F7F7F7;
				line-height: 62rpx;
				text-align: center;
				margin-right: 5rpx;
			}
		}
	}

	// 商品部分css
	.product {
		margin: 24rpx 0;
		width: 690rpx;
		min-height: 222rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		opacity: 1;
		padding: 0 30rpx;
		display: flex;
		align-items: center;

		.product-left {
			width: 180rpx;

			image {
				width: 160rpx;
				height: 160rpx;
			}
		}

		.product-centre {
			width: 510rpx;

			// display: flex;
			// align-items: center;
			// justify-content: space-between;
			.top-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 30rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;

				>view {
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				image {
					width: 44rpx;
					height: 56rpx;
				}
			}

			.centre-title {
				font-size: 26rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #555555;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 20rpx 0;

				.right {
					display: flex;
					align-items: center;

					.title-one {
						height: 28rpx;
						font-size: 26rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #F99529;
						margin-right: 32rpx;
					}
				}
			}

			.bottom-title {
				width: 510rpx;
				display: flex;
				align-items: center;
				flex-wrap: flex;

				// overflow-x: hidden;
				.bottom-frame {
					width: fit-content;
					padding: 0 15rpx;
					height: 34rpx;
					background: linear-gradient(90deg, #FFE9E1 0%, #FFF8F5 100%);
					border-radius: 8rpx;
					line-height: 34rpx;
					font-size: 18rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #FF6229;
					margin-right: 22rpx;
				}
			}
		}
	}
}
</style>